<template>
  <div class="movieList clear_fix">
    <img :src="data.img | fliterImg" alt="" />
    <div class="main-left">
      <h2>{{ data.nm }}</h2>
      <p>{{ data.star }}</p>
      <p>{{ data.rt }}</p>
    </div>
    <div class="main-right">
      <p>9.5分</p>
      <div @click="data.haspromotionTag = !data.haspromotionTag">
        <i v-if="data.haspromotionTag" class="iconfont icon-xin"></i>
        <i v-else class="iconfont icon-heart-b"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.movieList {
  padding: 0.2rem;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  img {
    float: left;
    width: 1.5rem;
    height: 2rem;
  }
  .main-left {
    float: left;
    width: 4rem;

    margin-left: 0.3rem;
    h2 {
      font-size: 0.35rem;
      height: 0.8rem;
      line-height: 0.8rem;
      font-weight: 900;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #aaa;
      font-size: 0.28rem;
      margin: 0.1rem 0;
    }
  }
  .main-right {
    float: right;
    p {
      font-size: 0.3rem;
      color: orange;
      text-align: right;
    }
    div {
      width: 0.8rem;
      height: 0.5rem;
      border-radius: 0.1rem;
      border: 1px solid red;
      margin-top: 0.2rem;
      color: red;
      text-align: center;
      line-height: 0.5rem;
      transform: 0.2s;
    }
  }
}
</style>
